<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <li v-for="item in list">
            <p>您好</p>
            <p>价格:{{item.price}}</p>
            <p>
                <!-- <button @click="subNum(item.id)">-</button> -->
                <button @click="subNum(item)">-</button>

                <span>数量:{{item.num}}</span>
                <!-- <button @click="addNum(item.id)">+</button> -->
                <button @click="addNum(item)">+</button>

            </p>
            <p>总价: {{(item.price * item.num).toFixed(1)}}</p>
            ---------------
        </li>
    </div>
    <script src="./node_modules/vue/dist/vue.global.js"></script>
    <script>

        const data = [
            {id:1,price:'100',num:10},
            {id:2,price:'90.5',num:20},
            {id:3,price:'52.8',num:30}
        ]
        const { createApp} = Vue;
        // 创建实例并挂载
        createApp({
            data:function(){
                return {
                    list:data
                }
            },
            methods:{
                // addNum(id){
                addNum(item){

                    // console.log(id);
                    // // console.log(this.list);
                    // const info = this.list.find(item=>item.id==id);
                    // info.num++;
                    item.num++;
                },
                // subNum(id){
                subNum(item){

                    // console.log(id);
                    // console.log(this.list);
                    // const info = this.list.find(item=>item.id==id);
                    item.num>1 && item.num--;
                }   
            }
        }).mount('#app')
    </script>

</body>
</html>